<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
import { Login } from '@/api/index';
import { showSuccessToast } from 'vant';
const username = ref('');
const password = ref('');
const router = new useRouter();
const show = ref(false);
const onSubmit = (values) => {
    console.log('submit', values);
    Login({
        username: username.value,
        password: password.value
    })
        .then(function (response) {
            console.log(response);
            if (response.code == 2000) {
                show.value = true;
                setTimeout(() => {
                    show.value = false;
                    router.push('/')
                    showSuccessToast('登录成功');
                }, 1000);

            }
        })
        .catch(function (error) {
            console.log(error);
        })

};

</script>

<template>
    <div class="body">

        <div class="main">

            <header class="header">
                <van-image width="10rem" height="10rem" fit="contain"
                    src="src\assets\img\logo.png" />
                <h2 style="color: #7ed9cf;">食光机登录</h2>
            </header>
            <div class="container">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            <van-loading v-if="show" />
                            <label v-if="!show">登录</label>
                        </van-button>
                    </div>
                </van-form>
                <a href="http://localhost:5173/register" class="register">
                    注册
                </a>
            </div>
        </div>
    </div>

</template>

<style lang="scss" scoped>
.body {
    font-family: Arial, sans-serif;
    // background-image: linear-gradient(45deg,#3285dd,#004691,#3285dd);
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 0px;
    padding-bottom: 0px;
    background-image: url('../assets/img/login4.jpg');
    background-size: cover; /* 使图片覆盖整个容器 */
  background-position: center; /* 将图片居中 */
  background-repeat: no-repeat; /* 禁止图片重复 */

}

.main {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 320px;
    // margin: 20px;
    margin-top: 33vw;
    margin-bottom: 140px;
    // margin-bottom: 81.8vw;
    background-color: rgb(255,255,255,0.7);
    
}

.header {
    // background-color: #007BFF;
    color: #000;
    padding: 16px;
    text-align: center;
}

.container {
    padding: 24px;
}

.register {
    display: block;
    text-align: center;
    color: #007BFF;
    text-decoration: none;
    margin-top: 16px;
}
</style>
